import {computed, designComponent, getComponentCls, useClasses, useStyles} from "@peryl/react-compose";
import {getPrimaryColor} from 'plain-design';

import './ThemeColor.scss';

export const ThemeColor = designComponent({
  name: 'theme-color',
  props: {
    primaryKey: { type: String }
  },
  setup({ props }) {
    const classes = useClasses(() => [getComponentCls('theme-color')]);
    const primaryColor = computed(() => getPrimaryColor(props.primaryKey));
    const style1 = useStyles(styles => {styles.backgroundColor = primaryColor.value.light;});
    const style2 = useStyles(styles => {styles.backgroundColor = primaryColor.value.dark;});
    return () => (
      <div className={classes.value}>
        <div style={style1.value}/>
        <div style={style2.value}/>
      </div>
    );
  },
});
